<template>
  <el-table
    :data="GoodOptionData"
    stripe
    style="width: 100%">

    <!-- 展开项 -->
    <el-table-column type="expand">
      <!-- 模板 -->
      <template v-slot="data">

        <!-- 循环渲染tag -->
        <el-tag closable v-for="(item, index) in data.row.attr_vals" 
        :key="index" @close="tagClosed(index, data.row)">{{item}}
        </el-tag>

        <!-- 添加tag  -->
        <el-input
        class="input-new-tag"
        v-if="data.row.inputVisible"
        v-model="data.row.inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm(data.row)"
        @blur="handleInputConfirm(data.row)" />
        <el-button v-else size="small" @click="showInput(data.row)">+ New Tag</el-button>

      </template>
    </el-table-column>
    <!-- 索引 -->
    <el-table-column type="index" label="#"/>

    <!-- 参数名称 -->
    <el-table-column prop="attr_name" label="参数名称"/>

    <!-- 操作 -->
    <el-table-column label="操作">
      <template v-slot="data">
        <!-- 按钮 -->
        <el-button-com text="修改" size="mini" icon="el-icon-edit" @click.native="openEditDialog(data.row)" />
        <el-button-com text="删除" size="mini" btnType="danger" icon="el-icon-delete"  @click.native="delOptionItem(data.row)"/>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom';

// 请求
import { delOptionById, putAddOption } from '@/network/goodOptionRequest';

export default {
  props: {
    GoodOptionData: Array
  },
  methods: {
    openEditDialog(data) { // 打开编辑dialog
      this.$bus.$emit('editDialogopen', data);
    },
    async delOptionItem(row) { // 删除当前参数项
      const resConfirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err);

      // 用户取消删除
      if (resConfirm !== 'confirm') {
        return this.$message.info('取消删除操作');
      }

      // 用户确定删除，删除接口
      // console.log(row);
      const { meta } = await delOptionById(row.cat_id, row.attr_id);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getGoodOptionDataListRequest');
      return this.$message.success('删除成功');
    },
    showInput(row) { // tag - input 显示触发函数
      // console.log(row);
      row.inputVisible = true; // 展示input
      // 自动聚焦
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
      return;
    },
    handleInputConfirm(row) { // 隐藏input 展示btn触发
      // console.log(row);
      // console.log(row.inputValue.trim().length);

      // 用户输入不合法
      if (row.inputValue.trim().length === 0) {
        row.inputValue = '';
        return row.inputVisible = false;
      }

      // 用户输入合法
      row.attr_vals.push(row.inputValue);
      row.inputValue = ''; // 重置

      // 网络请求持久化
      this.addOptionRequest(row.cat_id, row.attr_id, row);
      return row.inputVisible = false; // 隐藏input
    },
    async addOptionRequest(id, attrId, row) { // 添加val参数
      const { meta } = await putAddOption(id, attrId, {
        attr_name: row.attr_name, 
        attr_sel: row.attr_sel, // 动态、静态
        attr_vals: row.attr_vals.join(' ') // 添加的val
      })
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      return this.$message.success(meta.msg);
    },
    tagClosed(index, row) { // tag关闭触发函数
      // console.log(index, row);
      row.attr_vals.splice(index, 1); // 删除当前项
      this.addOptionRequest(row.cat_id, row.attr_id, row);
    }
  },
  components: {
    ElButtonCom
  }
}
</script>

<style lang="scss" scoped>
  .el-tag {
    margin-right: 20px;
    margin-bottom: 15px;
  }
  .input-new-tag {
    width: 150px;
  }
</style>